<template>
  <div class="out-nav">
    <el-button type="success" icon="Edit" @click="showAddUser = true">编辑</el-button>
    <teleport to="body">
      <el-dialog v-model="showAddUser" title="修改订单数据" width="40%">
        <el-form :model="form" label-width="80px" status-icon :rules="rules" ref="ruleFormRef">
          <el-form-item label="订单价格" prop="order_price">
            <el-input v-model="form.order_price" />
          </el-form-item>
          <el-form-item label="是否付款" prop="pay_status">
            <el-radio-group v-model="form.pay_status" class="ml-4">
              <el-radio label="1" size="large">已付款</el-radio>
              <el-radio label="0" size="large">未付款</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否发货" prop="is_send">
            <el-radio-group v-model="form.is_send" class="ml-4">
              <el-radio label="是" size="large">是</el-radio>
              <el-radio label="否" size="large">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="onsubmit(ruleFormRef)">
              提交
            </el-button>
            <el-button @click="closeDialog(ruleFormRef)">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </teleport>
  </div>
</template>
  
<script setup>
import { defineProps, reactive, ref, watchEffect } from "vue";
import { setOrders } from "@/api/order";
import { ElMessage, ElMessageBox } from "element-plus";
const props = defineProps({
  getList: {
    type: Function,
  },
  scope: {
    type: Object,
    default: function () { },
  },
});
let showAddUser = ref(false);
let ruleFormRef = reactive({});
let form = reactive({ ...props.scope.row });
// console.log("form", form);
let rules = {
  order_price: [
    { required: true, message: "请输入订单价格", trigger: "blur" },
  ],
};
watchEffect(() => {
  form = reactive({ ...props.scope.row });

})
const closeDialog = (ruleFormRef = null) => {
  if (ruleFormRef != null) ruleFormRef.resetFields();
  showAddUser.value = false;
};
const onsubmit = (ruleFormRef) => {
  ruleFormRef.validate(async (isValid) => {
    if (isValid) {
      form.is_send = Number(form.is_send == '是');
      let res = await setOrders(props.scope.row.order_id, form);
      ElMessageBox.alert(res.meta.msg, "", {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: "确认",
        callback: () => {
          ElMessage({
            type: res.meta.status == 201 ? "success" : "error",
            message: res.meta.status == 201 ? "修改成功" : "修改失败",
          });
        },
      });
      closeDialog(ruleFormRef);
      props.getList();
    }
    // ruleFormRef.resetFields();
  });
};
</script>
  
<style lang="scss" scoped>
.out-nav {
  display: inline-block;
  margin: 0 10px;
}

.el-dialog {
  padding: 100px;
}
</style>